<template>
<div class="xinzhen">
    <div>
        <img src="../assets/img/7519.png" alt="" @click="$router.go(-1)" />
        <span>新增银行卡</span>
        <div class="queren" @click="ssr">确认</div>
    </div>
    <div class="xm">
        <span>姓名</span>
        <input type="text" name="" id="" placeholder="请输入" v-model="xinm" />
    </div>
    <div class="kh">
        <span>卡号</span>
        <!-- //输入银行卡 -->
        <input v-model="kah" placeholder="请输入" type="text" />

        <!-- <input type="text" name="" id="" placeholder="请输入" v-model="kah"/> -->
    </div>
    <div class="khh">
        <span>开户行</span>
        <input type="text" name="" id="" placeholder="请输入(精确到支行)" v-model="kahh" />
    </div>
    <!-- <p>温馨提示！每个账户最多两张银行卡</p> -->
    <div class="xinzhen-box">
        <p class="p1">姓名不能为空</p>
        <p class="p2">请输入中文姓名</p>
        <p class="p3">卡号不能为空</p>
        <p class="p4">开户行不能为空</p>
    </div>
    <!-- 模态框 -->
    <div class="motai" @click="ssp">
        <div>
            <div class="main">
                <div><img src="../assets/img/sc.png" alt="" class="main-img" /></div>
                <p v-text="this.dData"></p>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import local from "@/utils/local";
import {
    BindBankCardInfo
} from "@/api/all.js"
export default {
    data() {
        return {
            flag: "false",
            xinm: "",
            kah: "",
            kahh: "",
            // 姓名正则
            zw: /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/,
            // 银行卡号正则
            Card: /^[1-9]\d{12,18}$/,
            // 
            dData: "",

        };
    },
    mounted() {},
    methods: {
        // //操作银行卡
        // onInput(event) {
        // 	// this.kah = event.detail.value
        // 	this.kah = this.kah.replace(/\D/g, '') // 不允许输入非数字字符
        // 	this.kah = this.kah.replace(/(\d{4})(?=\d)/g, '$1 ') // 4位
        // 	// console.log(this.kah)
        // },

        ssr() {
            if (this.xinm == "") {
                this.$notify({
                    message: '请填写姓名',
                    type: 'warning',
                    position: 'top-left',
                    duration: 1500
                });

            } else if (!this.zw.test(this.xinm)) {
                this.$notify({
                    message: '姓名不正确',
                    type: 'warning',
                    position: 'top-left',
                    duration: 1500
                });

            } else if (this.kah == "") {
                this.$notify({
                    message: '请填写卡号',
                    type: 'warning',
                    position: 'top-left',
                    duration: 1000
                });
            } else if (!this.Card.test(this.kah)) {

                this.$notify({
                    message: '请填写正确的卡号',
                    type: 'warning',
                    position: 'top-left',
                    duration: 1000
                });
            } else if (this.kahh == "") {
                this.$notify({
                    message: '请填写开户行',
                    type: 'warning',
                    position: 'top-left',
                    duration: 1500
                });

            } else {
                this.flag == true
                let data = {
                    BankCardNumber: this.kah.replace(/\s/g, ""),
                    BankName: this.xinm,
                    BankAddress: this.kahh,
                    IsDefault: true
                }
                // console.log(data, 'wqewqewe');
				BindBankCardInfo(data).then(res =>{
					console.log(res,'qqqqq');
                	let Data = res.Data
                	if(res.Code == 200){

                		this.dData = Data;
                		document.querySelector(".motai").style.visibility = "visible";
                		setTimeout(() => {
                		this.$router.replace("/kabao");
                		}, 1000);

                	}else if(res.Code == 603){

                		this.dData = Data;
                		document.querySelector(".motai").style.visibility = "visible";
                	}

                })
                
            }
        },
        ssp() {
            document.querySelector(".motai").style.visibility = "hidden";
        },
        // 取消按钮
        sspp() {
            document.querySelector(".motai").style.visibility = "hidden";
        },
        // 确认按钮
        ssrr() {
            document.querySelector(".motai").style.visibility = "hidden";
        },
    },
    created() {},
};
</script>

<style lang="less" scoped>
.main-img {
    height: 100%;
}

.p1,
.p2,
.p3,
.p4 {
    display: none;
    text-align: center;
    font-size: 0.9rem;
    color: #fc3d3d;
}

.main {
    padding: 4%;
    box-sizing: border-box;
}

.main>div:first-child {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: flex-end;
}

.boxx>div:first-child {
    color: #659df7;
    border-bottom-left-radius: 5px;
    border-top: 1px solid #e6e6e6;
}

.boxx>div:nth-child(2) {
    color: #659df7;
    border-bottom-right-radius: 5px;
    border-top: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
}

.boxx {
    width: 100%;
    height: 42%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.boxx>div {
    width: 50%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

.yanz {
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    padding-left: 4%;
    box-sizing: border-box;
    width: 100%;
    height: 25%;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: 1px solid rgba(204, 204, 204, 0.6);
    font-size: 0.9rem;
    color: #333;
}

.motai>div {
    width: 90%;
    background-color: #fff;
    border-radius: 5px;
    height: 10%;
}

.motai>div>div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: space-between;
}

.motai>div>div>button {
    width: 22%;
    height: 100%;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.motai {
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.7);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    visibility: hidden;
    justify-content: center;
    align-items: center;
}

.xinzhen>p {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 400;
    color: #333;
    margin-top: 5%;
    margin-bottom: 4%;
}

.xm>span,
.kh>span {
    margin-right: 2.3125rem;
}

.khh>span {
    margin-right: 1.4375rem;
}

.xm,
.kh,
.khh {
    width: 95%;
    height: 7%;
    border-bottom: 1px solid #e6e6e6;
    margin: 0 auto;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 400;
    color: #333333;
}

input {
    border: none;
    outline: none; //取消默认选中的样式
    height: 100%;
    width: 80%;
}

.queren {
    font-size: 0.9rem;
    font-weight: 400;
    color: #374ef2;
}

.xinzhen>div:first-child>img {
    width: 0.9375rem;
    height: 0.9375rem;
}

.xinzhen {
    width: 100%;
    height: 100%;
    background: #ffffff;
}

.xinzhen>div:first-child {
    width: 100%;
    height: 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 3%;
    padding-right: 4%;
    box-sizing: border-box;
    font-size: 1.1rem;
    font-weight: 500;
    color: #3a3a3a;
    border-bottom: 1px solid #e6e6e6;
}
</style>
